<template>
  <el-dialog title="修改目录" :visible="showDialog" width="50%" @close="onClose" @closed="onClosed" @open="onOpen">
    <!-- 修改的表单 -->
    <el-form ref="formRef" label-width="80px" :model="form" :rules="formRules">
      <el-form-item label="所属学科" prop="subjectID" v-if="!subjects.id && !subjects.name">
        <el-select style="width:100%" v-model="form.subjectID">
          <el-option :label="item.label" :value="item.value" v-for="item in subjectsList" :key="item.id"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目标名称" prop="tagName">
        <el-input v-model="form.tagName" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { update, detail } from '@/api/hmmm/tags.js'

export default {
  name: 'tagsEdit',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      // 修改
      form: {
        subjectID: '',
        tagName: ''
      },
      formRules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }],
        tagName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }]
      },
      // 学科列表
      subjectsList: []
    }
  },
  computed: {
    subjects() {
      return this.$route.query || null
    }
  },
  watch: {
    '$route.query'() {
      this.initTagsList()
    }
  },
  created() {
    this.initSubjectList()
  },
  methods: {
    async onOpen() {
      const result = await detail({ id: this.id })
      console.log(result)
      this.form = result.data
    },
    // 学科列表
    async initSubjectList() {
      const result = await simple({ ...this.q })
      console.log(result)
      this.subjectsList = result.data
    },
    onClose() {
      this.$emit('update:showDialog', false)
    },
    onConfirm() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return

        // 调用修改接口
        await update(this.form)

        // 成功后的3件事儿
        this.$message.success('修改标签成功！')
        this.$emit('reload')
        this.$emit('update:showDialog', false)
      })
    },

    // 对话框关闭完成，清理数据
    onClosed() {
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

<style scoped lang="less"></style>
